/**
 * @description  代办任务
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { TableC } from '../../../comps';
import uuid from 'es6-uuid';

class ApprovalHistory extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: {}, //columns dataSource
    };
  }

  componentDidMount() {
    this.getHistoryInfo(this.props.processInstanceId);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.processInstanceId && nextProps.processInstanceId != this.props.processInstanceId) {
      this.getHistoryInfo(nextProps.processInstanceId);
    }
  }
  changeColumns = (arr) => {
    arr &&
      arr.map((item) => {
        if (item.key == 'relatedInformation') {
          item.ellipsis = true;
        } else {
          item.width = '25%';
          item.widthPercent = true;
        }
      });
    return arr;
  };
  // 调用接口，获取审批历史
  getHistoryInfo = (processInstanceId) => {
    const { dispatch } = this.props;
    if (!processInstanceId) return;
    let params =
      this.props.type == 'businessKey'
        ? {
            //指令查询businessKey 和 审批信息processInstanceId的审批历史入参名称不同
            businessKey: processInstanceId,
          }
        : { processInstanceId };
    dispatch({
      type: 'agencyTaskM/getHistory',
      payload: { ...params },
      callback: (data) => {
        this.setState({
          data: data || {},
        });
      },
    });
  };
  // 为避免表格渲染出错添加唯一性标识
  addId = (e) => {
    const data = e;
    if (data && data.length) {
      data.map((item) => {
        item.uid = uuid(32);
      });
    }
    return data;
  };

  //渲染表格
  // 审批历史下的表格
  tableRender = () => {
    const { loading } = this.props;
    const {
      data: { columns = [], dataSource = [] },
    } = this.state;
    return (
      <div style={{ marginTop: '10px' }}>
        <TableC
          columns={this.changeColumns(columns)}
          dataSource={this.addId(dataSource)}
          hidePage={true}
          rowKey='uid'
          loadingStatus={loading.effects['agencyTaskM/getHistory'] == true}
        />
      </div>
    );
  };

  render() {
    return <div>{this.tableRender()}</div>;
  }
}
export default connect(({ agencyTaskM, loading }) => ({
  agencyTaskM,
  loading,
}))(ApprovalHistory);
